<template>
    <view class="week-select-picker">
        <view class="wk-head">
            <view class="wk-btn" @click.stop="onCancel">取消</view>
            <view class="wk-btn" :style="{'color':themeColor}" @click.stop="onConfirm">确定</view>
        </view>
        <picker-view :value="value" @change="bindChange" class="week-picker-view">
            <picker-view-column>
                <view :class="['item', {'dot-tips':years.indexOf(`${val}`)!=-1}]" v-for="(val,index) in yearList" :key="index">{{val}}年</view>
            </picker-view-column>
            <picker-view-column>
                <view :class="['item', {'dot-tips':months[yearList[valueWeek[0]]]&&months[yearList[valueWeek[0]]].indexOf(index)!=-1}]" v-for="(index) in 12" :key="index">{{index}}月</view>
            </picker-view-column>
        </picker-view>
    </view>
</template>
<script>
export default {
    props: {
        yearList: {
            type: Array,
            default: []
        },
        value: {
            type: Array,
            default: []
        },
        themeColor:{
            type:String,
            default(){
                return "#6ba1ff"
            }
        },
        dateMarked: {
            type: Array,
            default: ()=>{
                return []
            }
        }
    },
    data() {
        return {
            valueWeek: [],
            monthDateList: [],
            years: [],
            months: []
        }
    },
    mounted(){
        this.valueWeek = this.value
        this.init()
    },
    methods: {
        init(){
            for(let i=0; i<this.dateMarked.length; i++){
                let value = this.dateMarked[i].split('-')
                let year = value[0],
                month = parseInt(value[1]);
                if(!this.months[year]){
                    this.months[year] = []
                }
                
                if(this.months[year].indexOf(month)==-1){
                    
                    this.months[year].push(month);
                }
            }
            this.years = Object.keys(this.months)
        },
        bindChange (e) {
            const val = e.detail.value;
            this.valueWeek = val;
            this.init()
        },
        onCancel(){
            this.$emit("cancel");
        },
        onConfirm(){
            let val = this.valueWeek;
            val = val.length>0?val: this.value;
            this.$emit("confirm", val);
        },
    }
}

</script>
<style lang="less">
    .week-select-picker{
		position: absolute;
		width: 100%;
		background: #FFFFFF;
        .week-picker-view{
            height: 582rpx;
        }
		
		.uni-picker-view-indicator{
			height: 100rpx;
		}
		.item{
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
            position: relative;
            &.dot-tips::after{
                position: absolute;
                content: '';
                top: 20rpx;
                right: calc(50% - 74upx);
                width: 20upx;
                height: 20upx;
                border-radius: 50%;
                background-color: #f43530;
            }
		}
        .wk-head{
            height: 88rpx;
            background-color: #FFFFFF;
            border-bottom: 2rpx solid #e5e5e5;
            padding: 0 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .wk-btn{
                color: #888;
                font-size: 32rpx;
            }
        }
	}
</style>